<template>
  <div class="app-container" >
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="基础参数" name="0"/>
      <el-tab-pane label="商家配置" name="1"/>
      <el-tab-pane label="支付开关配置" name="2"/>
    </el-tabs>
    <el-form ref="form" :model="form" :rules="rules" label-width="200px" v-if="!isOver">
      <!--      基础参数-->
      <el-row v-if="activeName == 0">
        <el-row>
          <el-col :span="10">
            <el-form-item label="平台名称" prop="mallName">
              <el-input v-model="form.mallName" placeholder="请输入平台名称" size="mini" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="平台客服电话" prop="mallTelphone" >
              <el-input v-model="form.mallTelphone" placeholder="请输入平台客服电话" size="mini" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="数据大屏标题" prop="dataViewTitle" >
              <el-input v-model="form.dataViewTitle" placeholder="数据大屏标题" size="mini" />
            </el-form-item>
          </el-col>

<!--          <el-col :span="12">-->
<!--            <el-form-item label="是否开启充值" prop="isOpenRecharge" >-->
<!--              <el-radio-group v-model="form.isOpenRecharge"  size="mini">-->
<!--                <el-radio :value="0" :label="0">关闭</el-radio>-->
<!--                <el-radio :value="1" :label="1">开启</el-radio>-->
<!--              </el-radio-group>-->
<!--            </el-form-item>-->
<!--          </el-col>-->

        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="绑定房屋验证码" prop="isNeedSmsBandRoom" >
              <el-radio-group v-model="form.isNeedSmsBandRoom"  size="mini">
                <el-radio :value="0" :label="0">不需要</el-radio>
                <el-radio :value="1" :label="1">需要</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="是否开启首页搜索框" prop="isShowSearch">
              <el-radio-group v-model="form.isShowSearch"  size="mini">
                <el-radio :value="0" :label="0">关闭</el-radio>
                <el-radio :value="1" :label="1">开启</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
<!--          <el-col :span="10">-->
<!--            <el-form-item label="是否开启商家入驻邀请奖励" prop="isOpenMerRegCash">-->
<!--              <el-radio-group v-model="form.isOpenMerRegCash"  size="mini">-->
<!--                <el-radio :value="0" :label="0">关闭</el-radio>-->
<!--                <el-radio :value="1" :label="1">开启</el-radio>-->
<!--              </el-radio-group>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
          <el-col :span="10">
            <el-form-item label="首页CSS样式" prop="firstPageFilterCss" >
              <el-input v-model="form.firstPageFilterCss" placeholder="首页CSS样式" size="mini" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="开启平台公告提示" prop="isShowPlatformNotice" >
              <el-radio-group v-model="form.isShowPlatformNotice"  size="mini">
                <el-radio :value="0" :label="0">关闭</el-radio>
                <el-radio :value="1" :label="1">开启</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="form.isShowPlatformNotice === 1">
            <el-form-item label="公告图片地址" prop="platformNoticeImg" style="width:50%">
              <el-input v-model="form.platformNoticeImg" type="textarea" rows="3" placeholder="请输入公告图片地址" size="mini" />
            </el-form-item>
          </el-col>
        </el-row>

<!--        <el-row>-->
<!--          <el-col :span="10">-->
<!--            <el-form-item label="是否开启微信流量广告" prop="isShowWxAd" >-->
<!--              <el-radio-group v-model="form.isShowWxAd"  size="mini">-->
<!--                <el-radio :value="0" :label="0">关闭</el-radio>-->
<!--                <el-radio :value="1" :label="1">开启</el-radio>-->
<!--              </el-radio-group>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--        </el-row>-->
      </el-row>
      <!--      商家配置-->
      <el-row v-if="activeName == 1">
        <el-col :span="24">
          <el-form-item label="是否显示商家入驻入口" prop="isShowMer" style="width:50%">
            <el-radio-group v-model="form.isShowMer"  size="mini">
              <el-radio :value="0" :label="0">关闭</el-radio>
              <el-radio :value="1" :label="1">开启</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
<!--        <el-col :span="24">-->
<!--          <el-form-item label="是否开启使用抵扣券" prop="isOpenDikou" style="width:50%">-->
<!--            <el-radio-group v-model="form.isOpenDikou" size="mini">-->
<!--              <el-radio :value="0" :label="0">不启用</el-radio>-->
<!--              <el-radio :value="1" :label="1">启用</el-radio>-->
<!--            </el-radio-group>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
        <el-col :span="24">
          <el-form-item label="是否开启提现" prop="isOpenCash" style="width:50%">
            <el-radio-group v-model="form.isOpenCash"  size="mini">
              <el-radio :value="0" :label="0">关闭</el-radio>
              <el-radio :value="1" :label="1">开启</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="form.isOpenCash === 1">
          <el-form-item label="最低提现金额" prop="minCashMoney" style="width:50%">
            <el-input v-model="form.minCashMoney" placeholder="请输入最低提现金额" size="mini">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </el-col>

<!--        <el-col :span="24">-->
<!--          <el-form-item label="商品详情停留时间" prop="watchAdDetailSecond" style="width:50%">-->
<!--            <el-input v-model="form.watchAdDetailSecond" placeholder="请输入商品详情停留时间" size="mini" style="width:32%;">-->
<!--              <template slot="append">秒</template>-->
<!--            </el-input>-->
<!--            <el-input v-model="form.watchAdDetailFeedCount" placeholder="请输入每次最多饲料数" size="mini"  style="width:32%;">-->
<!--              <template slot="append">克</template>-->
<!--            </el-input>-->
<!--            <el-input v-model="form.watchAdDetailMaxCount" placeholder="请输入赠送的最多次数" size="mini"  style="width:32%;">-->
<!--              <template slot="append">次</template>-->
<!--            </el-input>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :span="24">-->
<!--          <el-form-item label="商品视频广告停留时间" prop="watchAdVideoSecond" style="width:50%">-->
<!--            <el-input v-model="form.watchAdVideoSecond" placeholder="请输入商品视频广告停留时间" size="mini" style="width:50%;">-->
<!--              <template slot="append">秒</template>-->
<!--            </el-input>-->
<!--            <el-input v-model="form.watchAdVideoFeedCount" placeholder="请输入每次最多饲料数" size="mini"  style="width:50%;">-->
<!--              <template slot="append">克</template>-->
<!--            </el-input>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
      </el-row>
      <!--      支付开关配置-->
      <el-row v-if="activeName == 2">
        <el-col :span="24">
          <el-form-item label="商品/服务支付平台" prop="productPayPlatform" style="width:50%">
            <el-radio-group v-model="form.productPayPlatform"  size="mini">
              <el-radio :value="0" :label="0">微信支付</el-radio>
              <el-radio :value="1" :label="1">银联微信</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
<!--        <el-col :span="24">-->
<!--          <el-form-item label="充电支付平台" prop="chargerPayPlatform" style="width:50%">-->
<!--            <el-radio-group v-model="form.chargerPayPlatform"  size="mini">-->
<!--              <el-radio :value="0" :label="0">微信支付</el-radio>-->
<!--              <el-radio :value="1" :label="1">农商行-银联</el-radio>-->
<!--            </el-radio-group>-->
<!--          </el-form-item>-->
<!--        </el-col>-->


        <el-col :span="24">
          <el-form-item label="是否开通物业缴费" prop="isOpenWyf" style="width:50%">
            <el-radio-group v-model="form.isOpenWyf"  size="mini">
              <el-radio :value="0" :label="0">关闭</el-radio>
              <el-radio :value="1" :label="1">开启</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>


        <el-col :span="24">
          <el-form-item label="物业费订单支付平台" prop="wyfPayPlatform" style="width:50%">
            <el-radio-group v-model="form.wyfPayPlatform"  size="mini">
              <el-radio :value="0" :label="0">微信支付</el-radio>
              <el-radio :value="1" :label="1">银联微信</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
<!--        <el-col :span="24">-->
<!--          <el-form-item label="中介订单支付平台" prop="intermediaryPayPlatform" style="width:50%">-->
<!--            <el-radio-group v-model="form.intermediaryPayPlatform"  size="mini">-->
<!--              <el-radio :value="0" :label="0">微信支付</el-radio>-->
<!--              <el-radio :value="1" :label="1">农商行-银联</el-radio>-->
<!--            </el-radio-group>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :span="24">-->
<!--          <el-form-item label="水电表订单支付平台" prop="electricPayPlatform" style="width:50%">-->
<!--            <el-radio-group v-model="form.electricPayPlatform"  size="mini">-->
<!--              <el-radio :value="0" :label="0">微信支付</el-radio>-->
<!--              <el-radio :value="1" :label="1">农商行-银联</el-radio>-->
<!--            </el-radio-group>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :span="24">-->
<!--          <el-form-item label="套餐活动订单支付平台" prop="setMealPayPlatform" style="width:50%">-->
<!--            <el-radio-group v-model="form.setMealPayPlatform"  size="mini">-->
<!--              <el-radio :value="0" :label="0">微信支付</el-radio>-->
<!--              <el-radio :value="1" :label="1">农商行-银联</el-radio>-->
<!--            </el-radio-group>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :span="24">-->
<!--          <el-form-item label="领养订单支付平台" prop="poultryPayPlatform" style="width:50%">-->
<!--            <el-radio-group v-model="form.poultryPayPlatform"  size="mini">-->
<!--              <el-radio :value="0" :label="0">微信支付</el-radio>-->
<!--              <el-radio :value="1" :label="1">农商行-银联</el-radio>-->
<!--            </el-radio-group>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
      </el-row>

    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: center">
      <el-button :loading="buttonLoading" size="mini" type="warning" @click="clearRedis">清理缓存</el-button>
      <el-button :loading="buttonLoading" size="mini" type="primary" @click="submitForm">保存</el-button>
    </div>
  </div>
</template>

<script>
  import { getParameter, updateParameter,clearRedis } from "@/api/module/parameter";



  import Template from "./wx/template";

  export default {
    name: "Parameter",
    components: {Template},
    data() {
      return {
        activeName:0,
        // 按钮loading
        buttonLoading: false,
        // 遮罩层
        loading: true,
        isOver:false,
        // 导出遮罩层
        exportLoading: false,
        // 配置参数表表格数据
        parameterList: [],
        // 表单参数
        form: {},
        // 表单校验
        rules: {
        }
      };
    },
    created() {
      this.handleUpdate();
    },
    methods: {
      handleClick(val){
        console.log("handleClick",val);
        this.activeName = val.name;
      },
      getVersion(){
        return this.form.appVersion;
      },
      // 表单重置
      reset() {
        this.form = {
          id: undefined,
          mallName: undefined,
          mallTelphone: undefined,
          accessTokenMp:undefined,
          accessToken:undefined,
          mallAddress: undefined,
          mallLongitude: undefined,
          mallLatitude: undefined,
          appVersion:undefined,
          appFileUrl:undefined,
          isDefault: undefined,
          isShowMer: undefined,
          produceFeedRate: undefined,
          // isOpenDikou:undefined,
          isShowSearch:undefined,
          dataViewTitle:undefined,
          isOpenRegCash:undefined,
          productPayPlatform:undefined,
          setMealPayPlatform:undefined,
          wyfPayPlatform:undefined,
          isOpenWyf:undefined,
          isShowPlatformNotice:undefined,
          platformNoticeImg:undefined,
          isShowWxAd:undefined,
          isShowSplit:undefined,
          firstPageFilterCss:undefined,
          isNeedSmsBandRoom: undefined,
        };
        this.resetForm("form");
      },
      handleUploadSuccess(val){
        console.log('handleUploadSuccess',val);
        this.form.appFileUrl = val[0].name;
        console.log('this.form.appFileUrl',this.form.appFileUrl)
      },
      /** 修改按钮操作 */
      handleUpdate() {
        this.loading = true;
        this.reset();
        this.isOver = true;
        getParameter(1).then(response => {
          this.loading = false;
          this.form = response.data;
          this.isOver = false;
          this.title = "修改配置参数表";
        });
      },
      clearRedis(){
        clearRedis().then(response => {
          this.msgSuccess("清理成功");
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.isOver = true;
            updateParameter(this.form).then(response => {
              this.msgSuccess("修改成功");
              this.isOver = false;
            }).finally(() => {
              this.buttonLoading = false;
            });
          }
        });
      },
    }
  };
</script>
